<template>
    <div class="data-overview">
        <div class="module-title1">
            <div class="module-title_text">
                数据概览
            </div>
        </div>
        <div class="data-overview_module module-container">
            <div class="data-overview_module__introduce">
                <div class="module-introduce_top">
                    <img alt="暂无图片显示" :src="basicData.schoolPhoto" class="module-introduce_top__left" />
                    <div class="module-introduce_top__right">
                        {{basicData.schoolIntro}}
                    </div>
                </div>
                <div class="module-introduce_bottom">
                    <div class="module-introduce_bottom__total total1">
                        <div class="bottom-total_text">
                            <img src="../../../assets/icons/camera1.png" />
                            <div class="bottom-total_text__title">监控数量</div>
                        </div>
                        <div class="bottom-total_number">
                            <span style="color: #ADFAF5; margin-right: 5px">{{basicData.monitorCount}}</span>
                            <span class="bottom-total_number__unit" style="color: rgba(255, 255, 255, 0.71);">个</span>
                        </div>
                        <div class="bottom-total_line"></div>
                    </div>
                    <div class="module-introduce_bottom__total total2">
                        <div class="bottom-total_text">
                            <img src="../../../assets/icons/camera1.png" />
                            <div class="bottom-total_text__title">教职工数量</div>
                        </div>
                        <div class="bottom-total_number">
                            <span style="color: #ADFAF5; margin-right: 5px">{{basicData.teacherCount}}</span>
                            <span class="bottom-total_number__unit" style="color: rgba(255, 255, 255, 0.71);">人</span>
                        </div>
                        <div class="bottom-total_line"></div>
                    </div>
                    <div class="module-introduce_bottom__total total3">
                        <div class="bottom-total_text">
                            <img src="../../../assets/icons/camera1.png" />
                            <div class="bottom-total_text__title">学生数量</div>
                        </div>
                        <div class="bottom-total_number">
                            <span style="color: #ADFAF5; margin-right: 5px">{{basicData.studentCount}}</span>
                            <span class="bottom-total_number__unit" style="color: rgba(255, 255, 255, 0.71);">人</span>
                        </div>
                    </div>
                    <div class="module-introduce_bottom__total total4">
                        <div class="bottom-total_text">
                            <img src="../../../assets/icons/camera1.png" />
                            <div class="bottom-total_text__title">保安数量</div>
                        </div>
                        <div class="bottom-total_number">
                            <span style="color: #ADFAF5; margin-right: 5px">{{basicData.askCount}}</span>
                            <span class="bottom-total_number__unit" style="color: rgba(255, 255, 255, 0.71);">人</span>
                        </div>
                        <div class="bottom-total_line"></div>
                    </div>
                    <div class="module-introduce_bottom__total total5">
                        <div class="bottom-total_text">
                            <img src="../../../assets/icons/camera1.png" />
                            <div class="bottom-total_text__title">区域面积</div>
                        </div>
                        <div class="bottom-total_number">
                            <span style="color: #ADFAF5; margin-right: 5px">{{basicData.regionExtent}}</span>
                            <span class="bottom-total_number__unit" style="color: rgba(255, 255, 255, 0.71);">亩</span>
                        </div>
                        <div class="bottom-total_line"></div>
                    </div>
                    <div class="module-introduce_bottom__total total6">
                        <div class="bottom-total_text">
                            <img src="../../../assets/icons/camera1.png" />
                            <div class="bottom-total_text__title">车位数</div>
                        </div>
                        <div class="bottom-total_number">
                            <span style="color: #ADFAF5; margin-right: 5px">{{basicData.parkingCount}}</span>
                            <span class="bottom-total_number__unit" style="color: rgba(255, 255, 255, 0.71);">个</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        basicData: {
            typeof: Object
        }
    },
}
</script>

<style lang="less" scoped>
.data-overview_module {
    width: 427px;
    height: 318px;
    margin-top: 10px;
    .data-overview_module__introduce {
        margin: 13px 10px 20px 14px;
        .module-introduce_top {
            display: flex;
            .module-introduce_top__left {
                width: 212px;
                height: 147px;
                background: #D9D9D9;
                border-radius: 3px 3px 3px 3px;
                margin-right: 14px;
                font-size: 16px;
                color: #D9D9D9;
            }
            .module-introduce_top__right {
                width: 177px;
                height: 140px;
                font-weight: 400;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.9);
                line-height: 20px;
            }
        }
        .module-introduce_bottom {
            display: flex;
            flex-wrap: wrap;
            margin-top: 15px;
            .module-introduce_bottom__total {
                position: relative;
                height: 54px;
                img {
                    width: 23px;
                    height: 23px;
                }
                .bottom-total_text {
                    margin-top: 2px;
                    margin-left: 7px;
                    margin-bottom: 4px;
                    display: flex;
                    .bottom-total_text__title {
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 20px;
                        margin-left: 7px;

                    }
                }
                .bottom-total_number {
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    span {
                        font-size: 20px;
                    }
                    .bottom-total_number__unit {
                        font-size: 12px;
                        display: inline-block;
                        line-height: 20px;
                    }
                }
                .bottom-total_line {
                    position: absolute;
                    top: 0;
                    right: 0;
                    content: '';
                    width: 0px;
                    height: 54px;
                    border-radius: 0px 0px 0px 0px;
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(185, 199, 210, 0), rgba(185, 199, 210, 1), rgba(185, 199, 210, 0)) 1 1;
                }
            }
            .total1, .total4 {
                width: 115px;
            }
            .total2, .total5 {
                width: 155px;
                .bottom-total_text {
                  justify-content: center;  
                }
            }
            .total3, .total6 {
                padding-left: 26px;
                box-sizing: border-box;
            }
            .total1, .total2, .total3 {
                margin-bottom: 24px;
            }
        }
    }
}
</style>